<template>
    <el-card shadow="always" id="box" v-for="item in Zhang" :key="item.id"> 
        <div class="box_1">
            <div class="box_11">
                <a @click="goDetail(item)">{{item.title}}</a>
            </div>
            <div class="box_22">
                <span class="one">{{item.zuo}}</span>
                <span class="two">{{item.time}}</span>
            </div>
        </div>
        <div class="box_2">
            <div class="box_11">
                <p>{{item.context}}</p>
            </div>
            <div class="box_12">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28"><path fill="none" d="M0 0H24V24H0z"/><path d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z" fill="rgba(52,72,94,1)"/></svg>
                <span>{{item.good}}</span>
            </div>
        </div>
    </el-card>
</template>
<script>
import {NewWenZhang} from '@/api/beautiful.js'
import { onMounted, reactive, toRefs } from 'vue'
import {  useRouter } from 'vue-router'
// 引入
import {ElLoad} from '@/Element-api/ElLoading.js'
export default {
    setup(){
        const newWeng = reactive({
            Zhang:[]
        })
        onMounted(()=>{
            NewWenZhang().then((res)=>{
                const {data} = res
                newWeng.Zhang = data
                console.log( newWeng.Zhang);
            }).catch((err)=>{
                console.log(err);
            })
        })
        const router = useRouter()
        // 跳转到detail页面
        const goDetail = (item)=>{
            const loading = ElLoad('正在跳转到详情页面')
            router.push('/Ko')
            setTimeout(()=>{
                loading.close()
                router.push({
                    path:'/detail',
                    query:item
                })
            },1200)
        }
        return{
            ...toRefs(newWeng),
            goDetail
        }
    }
}
</script>
<style lang="less" scoped>
    #box{
        width: 100%;
        height: 65px;
        position: relative;
        .box_1{
            width: 95%;
            height: 28px;
            position: absolute;
            top: 2px;
            line-height: 30px;
            left: 50%;
            right: 50%;
            transform: translateX(-50%);
            .box_11{
                position: absolute;
                left: 20px;
                width: 60%;
                a{
                    text-decoration: none;
                    color: rgb(255, 67, 67);
                    font-size: 18px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    cursor: pointer;
                }
                p:hover{
                    color: skyblue;
                }
            }
            .box_22{
                position: absolute;
                right: 0px;
                width: auto;
                span{
                    color: rgb(182, 182, 182);
                    font-size: 14px;
                }
                .one{
                    padding-right: 20px;
                    font-size: 17px;
                }
            }
        }

        .box_2{
            width: 95%;
            padding-left: 20px;
            height: 28px;
            line-height: 28px;
            font-size: 15px;
            margin-top: 5px;
            position: absolute;
            bottom: 2px;
            left: 50%;
            right: 50%;
            transform: translateX(-50%);
            .box_11{
                width: 90%;
                height: 28px;
                p{
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    color: rgb(114, 114, 114);
                }
            }
            .box_12{
                position: absolute;
                width:8%;
                height: 28px;
                top: 0px;
                right: 0px;
                
                text-align: center;
                span{
                    position: absolute;
                    right: 17px;
                }
            }
        }
    }
</style>
